import 'package:number_spark_flutter/model/ns_coin_goods_model.dart';
import 'package:number_spark_flutter/style/ns_style.dart';
import 'package:number_spark_flutter/widgets/brick/ns_brick.dart';
import 'package:number_spark_flutter/widgets/ns_app_bar.dart';
import 'package:number_spark_flutter/widgets/ns_white_app_bar.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../ns_mine_logic.dart';
import 'ns_coin_shop_logic.dart';

class NSCoinShopPage extends StatelessWidget {
  NSCoinShopPage({Key? key}) : super(key: key);

  final logic = Get.put(NSCoinShopLogic());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: kAppColor('#F6F6F6'),
      body: Stack(
        children: [
          const NSImage(
            assetImage: 'img_bg_main.png',
            width: double.infinity,
            height: double.infinity,
            fit: BoxFit.fill,
          ),
          const NSWhiteAppBar(
            'My Coins',
          ),
          NSColumn(
            margin: EdgeInsets.only(top: ScreenUtil().statusBarHeight + 65.h),
            children: [
              buildCoinView(),
              Expanded(
                child: CustomScrollView(
                  slivers: [
                    GetBuilder<NSCoinShopLogic>(builder: (logic) {
                      return SliverPadding(
                        padding: EdgeInsets.symmetric(horizontal: 18.w),
                        sliver: SliverGrid(
                          delegate: SliverChildBuilderDelegate((context, index) {
                            return buildListItem(logic.goodsList[index]);
                          }, childCount: logic.goodsList.length),
                          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2, childAspectRatio: 166 / 141, mainAxisSpacing: 12.w, crossAxisSpacing: 7.w),
                        ),
                      );
                    })
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  buildCoinView() {
    return NSStack(
      margin: EdgeInsets.only(top: 10.h, left: 28.w, right: 28.w, bottom: 10.h),
      children: [
        NSImage(
          assetImage: 'img_bg_mine_coin.png',
          width: 320.w,
        ),
        NSColumn(
          margin: EdgeInsets.only(left: 191.w, top: 15.h, bottom: 15.h),
          children: [
            NSStack(
              children: [
                NSText(
                  text: 'My Coins',
                  fontSize: 20.sp,
                  fontFamily: 'Modak-Regular',
                  foreground: Paint()
                    ..style = PaintingStyle.stroke
                    ..strokeWidth = 1.5
                    ..color = kAppColor('#FF6151A8'),
                ),
                NSText(
                  text: 'My Coins',
                  textColor: Colors.white,
                  fontSize: 20.sp,
                  fontFamily: 'Modak-Regular',
                ),
              ],
            ),
            GetBuilder<NSMineLogic>(builder: (logic) {
              return NSStack(
                children: [
                  NSText(
                    text: logic.userInfoModel.availableCoins.toString(),
                    fontSize: 35.sp,
                    fontFamily: 'Modak-Regular',
                    foreground: Paint()
                      ..style = PaintingStyle.stroke
                      ..strokeWidth = 1.5
                      ..color = kAppColor('#FF6151A8'),
                  ),
                  NSText(
                    text: logic.userInfoModel.availableCoins.toString(),
                    textColor: Colors.white,
                    fontSize: 35.sp,
                    fontFamily: 'Modak-Regular',
                  ),
                ],
              );
            }),
          ],
        )
      ],
    );
  }

  buildListItem(NSCoinGoodsModel model) {
    return Stack(
      alignment: Alignment.topRight,
      children: [
        NSColumn(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          margin: EdgeInsets.only(top: 17.h),
          padding: EdgeInsets.only(top: 27.w, bottom: 16.w),
          alignment: Alignment.topRight,
          color: kAppColor('#40000000'),
          radius: 24.r,
          children: [
            NSRow(
              margin: EdgeInsets.only(left: 28.w),
              children: [
                NSImage(
                  assetImage: 'icon_coin.png',
                  width: 44.w,
                ),
                NSColumn(
                  margin: EdgeInsets.only(left: 12.w),
                  children: [
                    NSText(
                      text: model.exchangeCoin.toString(),
                      textColor: Colors.white,
                      fontSize: 20.sp,
                      fontFamily: 'Modak-Regular',
                    ),
                    if ((model.discount ?? 0) > 0)
                      NSText(
                        text: '${(model.discount ?? 0) * 100}% off',
                        textColor: kAppColor('#FF14CDFB'),
                        fontSize: 10.sp,
                        fontFamily: 'Modak-Regular',
                      )
                  ],
                )
              ],
            ),
            NSRow(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                NSText(
                  text: '\$${model.price?.toStringAsFixed(2) ?? ''}',
                  textColor: Colors.white,
                  fontSize: 14.sp,
                  fontFamily: 'Modak-Regular',
                ),
                if (model.price != model.originalPrice)
                  NSText(
                    margin: EdgeInsets.only(left: 8.w),
                    text: '\$${model.originalPrice?.toStringAsFixed(2)}',
                    textColor: kAppColor('#80FFFFFF'),
                    fontSize: 12.sp,
                    textDecoration: TextDecoration.lineThrough,
                    fontFamily: 'Modak-Regular',
                  )
              ],
            )
          ],
          onTap: () {
            logic.doClickItem(model);
          },
        ),
        if (model.tags?.isNotEmpty ?? false)
          if (model.tags == 'Hot')
            NSImage(
              assetImage: 'icon_shop_hot.png',
              width: 53.w,
            )
          else
            NSImage(
              assetImage: 'icon_shop_big_deal.png',
              width: 53.w,
            )
      ],
    );
  }
}
